<template>
<div class="login">
  <div class="w path">
    <span>第77届全国药品交易会</span>|
    <span>2017中国健康营养博览会</span>|
    <span>2017年5月16-18日 国家会展中心（上海）</span>
  </div>
  <div class="w path-img">
    <img src="@/assets/img-01.jpg"/>
    <img style="margin-right:120px;" src="@/assets/img-02.jpg"/>
    <img src="@/assets/img-03.jpg"/>
    <img src="@/assets/img-04.jpg"/>
  </div>
  <div class="w login-box">
    <div class="login-ul">
      <div class="login-li"><count-to :start-val="1800" :end-val="2000" :duration="1000" />余家参展企业</div>
      <div class="login-li"><count-to :start-val="119800" :end-val="120000" :duration="1000" />人次专业观众</div>
      <div class="login-li"><count-to :start-val="80" :end-val="100" :duration="1000" />余家论坛及研讨会</div>
      <div class="login-li"><count-to :start-val="88000" :end-val="90000" :duration="1000" />平方米展示面积</div>
    </div>
    <div class="login-main">
      <div class="login-tit">预登记注册/登录</div>
      <div style="padding:0 10px;">
        <el-form :model="formData" :rules="formRules" ref="dataForm">
          <el-form-item prop="phoneNo">
            <el-input v-mask="'### #### ####'" v-model.trim="formData.phoneNo"  placeholder="请输入手机号码" auto-complete="off"></el-input>
          </el-form-item>			
          <el-form-item prop="numCode">
            <el-input v-model.trim="formData.numCode" spellcheck ="false" maxlength="4" style="width:255px;"  placeholder="请输入图形验证码" auto-complete="off"></el-input>
            <div class="pic-code"  @click = "changePicCode">
              <Sidentify  :identifyCode="picCode"></Sidentify>
            </div>
          </el-form-item>	
          <el-form-item prop="phoneCode">
            <el-input v-model.trim="formData.phoneCode" spellcheck ="false" style="width:255px;" maxlength="4"  placeholder="请输入短信验证码" auto-complete="off"></el-input>
            <el-button :class="[ sendFlag ? 'code-btn-cur' : 'code-btn']" type="primary" @click="sendCode">{{codeStr}}</el-button> 
          </el-form-item>					
          <el-form-item style=" text-align:center;">
            <el-button style=" width:430px;" :loading="loginLoad" type="primary" @click="goToLogin" >立即注册/登录</el-button>
          </el-form-item>	
          <el-form-item style=" text-align:right;">
            <a href="#">已注册观众找回预登记号</a>
          </el-form-item>		
        </el-form>
      </div>
    </div>
    <div class="w login-bot">
      <div class="login-pics">
        <div class="pic"><img src="@/assets/img-05.jpg"/><p>上届精彩回顾</p></div>
        <div class="pic"><img src="@/assets/img-06.jpg"/><p>观展日程</p></div>
        <div class="pic"><img src="@/assets/img-07.jpg"/><p>上现场同期会议活动</p></div>
      </div>
      <div class="login-gch">
        <div class="pic"><img src="@/assets/img-08.jpg"/></div>
        <p>微信公众平台</p>
      </div>
    </div>
  </div>
  <div class="footer">
    <span>关于我们</span>|<span>联系我们</span>|<span>招商产品在线</span>|<span>版权所有：国药励展展览有限责任公司</span>
  </div>
  </div>
</template>
<script>
import config from "@/config";
import {mask} from 'vue-the-mask'
import CountTo from 'vue-count-to'
import Sidentify from './components/Sidentify'
export default {
  directives: {mask},
  components: {CountTo,Sidentify},	
  data() {
    return {
      formData:{
        phoneNo:'',
        numCode:'',
        phoneCode:'',
      },
      formRules:{
        phoneNo: [{ required: true, message: "请输入手机号码!", trigger: "change"}],
        numCode: [{ required: true, message: "请输入图形验证码!", trigger: "change"}],
        phoneCode: [{ required: true, message: "请输入短信验证码!", trigger: "change"}],
      },
      sendFlag:true,
      codeStr:'发送验证码',
      picCode:'',
      loginLoad:false
    };
  },
  mounted() {
		this.id = this.$route.query.id ? this.$route.query.id : '';
    this.timer = null;
    this.picCode = this.randomCoding();
		if(config.userInfo){
			if(this.id){
				this.$router.replace("/index?id="+this.id);
			}else{
				this.$router.replace("/index");
			}		
		}		
  },
  methods: {
    phoneFalg(str) {
      if (str.length == 11 && /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(str)) {
        return true;
      } else {
        return false;
      }
    },
    async sendCode(){
      var _phone = this.formData.phoneNo.replace(/\s*/g,"");
      if(this.phoneFalg(_phone) == ''){
				this.$refs['dataForm'].fields[0].validateState = 'error'
				this.$refs['dataForm'].fields[0].validateMessage = '请输入手机号码！'
				return
			};
      if(!this.phoneFalg(_phone)){
				this.$refs['dataForm'].fields[0].validateState = 'error'
				this.$refs['dataForm'].fields[0].validateMessage = '请输入正确的手机号码！'				
				return
			};
      if(this.picCode != this.formData.numCode){
				this.$refs['dataForm'].fields[1].validateState = 'error'
				this.$refs['dataForm'].fields[1].validateMessage = '请输入正确的验证码！'					
				return
			};
      if (!this.sendFlag) {return;}
      this.sendFlag = false;
      var param = config.setFormData('getMobileCode',{mobile:_phone})
      var res = await this.$http.post(config.appCall,param);
      if(res.data && res.data.return_code == '0'){
        this.codeStr = "60S后重发";
        this.num = 60;
        this.timer = setInterval(() => {
          this.num--;
          this.codeStr = this.num + "S后重发";
          if (this.num == 0) {
            this.codeStr = "重新发送";
            clearInterval(this.timer);
            this.sendFlag = true;
          }
        }, 1000);
      }else{
        this.$message.error('发送验证码失败，请稍后再试！');
      }
    },
    async goToLogin(){
      this.$refs["dataForm"].validate(async valid => {
				if(!valid) return;
        var _phone = this.formData.phoneNo.replace(/\s*/g,"");
        this.loginLoad = true;
        var _paramData = {
          mobile:_phone, captcha:this.formData.phoneCode
        }
        var param = config.setFormData('customerCaptchaToLogin',_paramData)
        var res = await this.$http.post(config.appCall,param);				
        this.loginLoad = false;	
        if(res.data && res.data.return_code == '0'){
          if(this.id){
						this.$message.success('登录成功');
						config.userInfo = res.data;
						localStorage.userInfo = JSON.stringify(res.data);						
						this.setHasJoin();
					}else{
          	this.$message.error('无法获取展会信息！');
					}
        }else{
          this.$message.error(res.data.message);	
        }
      })
    },
		async setHasJoin(){
			var map = {
				token : config.userInfo.token,
				sessionId : config.userInfo.sessionId,
				customerUuid : config.userInfo.customer.uuid,
				exhibitionUuid :this.id,			
			};			
			
			var param = config.setFormData('checkHasJoinExhibition',map)
			var res = await this.$http.post(config.appCall,param);
			if(res.data.hasJoin){
				this.$router.replace({path: 'index', query: {'id': this.id,'tab':3}});
			}else{
				this.$router.replace({path: 'index', query: {'id': this.id,'tab':1}});
			}
			//
		},
    changePicCode(){
      this.picCode = this.randomCoding();
    },
    randomCoding(){
      var arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
      var idvalue ='';
      var n = 4;//这个值可以改变的，对应的生成多少个字母，根据自己需求所改
      for(var i=0;i<n;i++){
          idvalue+=arr[Math.floor(Math.random()*26)];
      }
      return idvalue;
    }
  }
}
</script>
<style scoped>
.login{}
.path{ text-align:right; font-size:12px; height:40px; line-height:40px; color:#333;}
.path span{ margin:0  5px; font-size:14px;}
.path-img{ height:75px; padding-top:10px; display:flex; justify-content:space-between}
.path-img img{ width:220px; height:75px;}
.login-box{ position:relative;}
.login-ul{ padding:40px 0 0 40px; float:left;}
.login-li{font-size:25px; line-height:90px;}
.login-li span{ font-size:36px; vertical-align:middle; margin-right:5px;}
.login-main{ width:450px; float:right; border-top:3px solid #68BCBC; margin-top:40px;}
.login-tit{ line-height:95px; font-size:25px; text-align:center; color:#68BCBC;}
.pic-code{ vertical-align:middle; position:relative; z-index:99;   float:right; cursor:pointer; height:40px; width:150px;}
.code-btn-cur{ float:right; width:150px; }
.code-btn{ float:right; width:150px; background: #aaaaaa !important; border:1px solid #aaa !important;}
.login-bot{ height:185px; display:flex; padding-top:15px; padding-bottom:10px;}
.login-pics{ flex:1;display:flex; padding-top:5px; padding-right:20px; flex-wrap:wrap;  justify-content:space-around}
.login-pics .pic{width:260px;}
.login-pics .pic img{ width:260px;}
.login-pics p{ text-align:center;}
.login-gch{ width:215px; }
.login-gch .pic{ width:215px; text-align:center; height:145px; border-left:2px solid #E5E5E5}
.login-gch p{ text-align:center;}
.footer{ text-align:center; font-size:12px; height:40px; line-height:40px; color:#999; padding-bottom:30px;}
.footer span{margin:0  5px; font-size:14px;}
</style>
